@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.summary-button.components-button {
	padding: $grid-unit-30;
	display: block;
	height: auto;
	transition: none;
	width: 100%;

	&:hover:not(:disabled, [aria-disabled="true"]) {
		background: color-mix(in srgb, #fff 98%, var(--wp-admin-theme-color, #3858e9));
		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));

		.summary-button-title {
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		.summary-button-navigation-icon,
		.summary-button-decoration svg {
			fill: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		&.has-density-low {
			&:not(:focus-visible) {
				border: 1px solid color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
			}
		}

		&.has-density-medium {
			&:not(:focus-visible, :last-child) {
				border-bottom: 1px solid color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
			}
		}
	}

	&[aria-disabled="true"] {
		opacity: 0.6;
		cursor: default;
	}

	.summary-button-title {
		@include body-large;
	}

	.summary-button-strapline {
		@include heading-small;
	}

	.summary-button-navigation-icon,
	.summary-button-decoration svg {
		fill: $gray-700;
		flex-shrink: 0;
	}

	.summary-button-decoration {
		display: inline-flex;

		img {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
		}
	}

	&.has-density-low {
		/* stylelint-disable-next-line scales/radii */
		border-radius: 7px;
		border: 1px solid $gray-200;
		background-color: #fff;
	}

	&.has-density-medium {
		padding: $grid-unit-20 $grid-unit-30;
		border-bottom: 1px solid $gray-100;
		border-radius: 0;

		.summary-button-title {
			@include body-medium;
			line-height: $font-line-height-medium;
		}
	}

	&:focus-visible {
		@include button-style__focus();
	}
}
